<template>
  <div class="coordinate-form">
    <Dialog :title="dialogTitle" v-model="dialogVisible">
      <SmForm
        class="-mb-15px"
        ref="formRef"
        isCol
        label-width="150px"
        v-model="formData"
        v-loading="formLoading"
        :options="requestFormOptions"
        :getModelValue="getFormData"
      >
        <!-- <template #authTree>
          <el-tree
            ref="permTreeRef"
            node-key="value"
            show-checkbox
            :data="menuTree"
            :filter-node-method="handlePermFilter"
            :check-strictly="false"
            class="mt-5"
            @check="check"
          >
            <template #default="{ data }">
              {{ data.label }}
            </template>
          </el-tree>
        </template> -->
        <template #idCard>
          <MultiImageUpload
            v-model="formData.imgList"
            :limit="1"
            @update:model-value="(val) => changeOneImg(val, formData, 'idCard')"
          />
        </template>
        <template #businessLicense>
          <MultiImageUpload
            v-model="formData.imgList1"
            :limit="1"
            @update:model-value="(val) => changeOneImg(val, formData, 'businessLicense')"
          />
        </template>

        <template #drivelicenseFront>
          <MultiImageUpload
            v-model="formData.imgList"
            :limit="1"
            @update:model-value="(val) => changeOneImg(val, formData, 'drivelicenseFront')"
          />
        </template>
        <template #drivelicenseReverse>
          <MultiImageUpload
            v-model="formData.imgList1"
            :limit="1"
            @update:model-value="(val) => changeOneImg(val, formData, 'drivelicenseReverse')"
          />
        </template>

        <template #coordinateItems>
          <SmTable
            border
            :options="coordinateItemsOptions"
            :data="coordinateItemslist"
            :pagination="false"
          >
            <template #field7="{ scope }">
              <el-checkbox v-model="scope.row.checked" :label="scope.row.field7" />
            </template>
            <template #field8="{ scope }">
              <SmSelect v-model="scope.row.field8" :data="mockCoordinateList" />
            </template>
          </SmTable>
        </template>
      </SmForm>

      <template #field29>
        <FileUpload
          v-model="formData.fileList"
          @update:model-value="(val) => changeFilesData(val, formData, 'field29')"
        />
      </template>

      <template #footer>
        <el-button @click="submitFormDB" type="primary" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </template>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import { createUser, getRoleList, getUser, updateUser } from "@/api/user";
import { addProperty } from "@/components/SmForm/src/utils";
import { createDBFn } from "@/utils/decorate";
import { defaultProps } from "@/utils/tree";
// import { mockTreeList } from "./data";
import {
  getCoordinateTypeList,
  getDeptTree,
  getInvoiceList,
  getOrganizationList,
  getProvinceCityDistrictList,
  getUserList,
} from "@/commonData";
// import { useAuth } from "../hooks/useAuth";
import DeptAPI from "@/api/system/dept-api";
import {
  coordinateDealMethodsList,
  certTypeList,
  enableList,
  invoiceTypeList,
  payList,
  relationshipList,
  unitList,
} from "@/commonData/dict";
import { changeOneImg } from "@/utils/changeData";
import { phoneRules } from "@/commonData/rules";
import { useTableData } from "@/components/SmTable/src/utils";
import { changeFilesData } from "@/utils/changeData";

const mockCoordinateList = [
  { label: "1000", value: "1000" },
  { label: "100万", value: "100万" },
  { label: "200万", value: "200万" },
];

const coordinateItemsFieldMap = {
  field7: {
    label: "统筹项目",
    slot: "field7",
  },
  field8: {
    label: "统筹额度",
    slot: "field8",
  },
  field9: "标准统筹费",
  field10: "政策折扣率(%)",
  field11: "应缴统筹费",
};
const { tableOptions: coordinateItemsOptions, transformTableOptions } = useTableData();
coordinateItemsOptions.value = transformTableOptions(coordinateItemsFieldMap);
const coordinateItemslist: any = ref([]);
for (let i = 0; i < 10; i++) {
  const obj: any = {};
  coordinateItemsOptions.value.forEach((item: any, index) => {
    obj[item.prop] = "这是测试数据" + index;
  });
  coordinateItemslist.value.push(obj);
}

/** 仓库 表单 */
defineOptions({ name: "CoordinateForm" });

const { t } = useI18n(); // 国际化

const dialogVisible = ref(false); // 弹窗的是否展示
const dialogTitle = ref("统筹信息"); // 弹窗的标题
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref(""); // 表单的类型：create - 新增；update - 修改
const initDefaultData = () => {
  return {
    guaranteeNum: 365,
  };
};
const initFormData = () => {
  const defaultData = initDefaultData();
  const data = {};
  Object.assign(data, defaultData);
  return data;
};
const formData: any = ref(initFormData());
const formRef = ref(); // 表单 Ref
const deptTree = ref([]);
const organizationList = ref([]);
const coordinateTypeList = ref([]);
const userList = ref([]);
const { provinceList, cityList, districtList } = getProvinceCityDistrictList(formData, formRef);
const invoiceList = ref([]);

// const {
//   isExpanded,
//   permKeywords,
//   checkedRole,
//   permTreeRef,
//   getMenuTreeAndRoleMenu,
//   menuTree,

//   setRoleMenu,
//   handlePermFilter,
//   togglePermTree,
//   handleAssignPermSubmit,
// } = useAuth();

// 只有选中时才有-调用接口拿到的时候也需要加
const check = (checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) => {
  formData.value.menuIds = checkedKeys?.checkedKeys;
  console.log(
    checkedNodes,
    checkedKeys,
    halfCheckedNodes,
    halfCheckedKeys,
    "checkedNodes,checkedKeys,halfCheckedNodes,halfCheckedKeys"
  );
};

/** 打开弹窗 */
const open = async (type: string, id?: string) => {
  dialogVisible.value = true;
  // dialogTitle.value = t("action." + type);
  formType.value = type;
  resetForm();

  getOrganizationList(organizationList);

  getDeptTree(deptTree);
  getCoordinateTypeList(coordinateTypeList);
  getUserList(userList);
  getInvoiceList(invoiceList);

  // if (!id) {
  //   getMenuTreeAndRoleMenu();
  // }

  // 修改时，设置数据
  if (id) {
    formLoading.value = true;
    try {
      const data = await DeptAPI.getFormData(id);
      const defaultData = initDefaultData();
      Object.assign(data, defaultData);
      formRef.value = data;

      // getMenuTreeAndRoleMenu(formData.value);
      // 主动触发表单数据回显
      formRef.value.initForm();
    } finally {
      formLoading.value = false;
    }
  }
};
defineExpose({ open }); // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(["success"]); // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate();
  // 提交请求
  formLoading.value = true;
  try {
    const data = formData.value as unknown as any;
    if (formType.value === "create") {
      await createUser(data);
      // ElMessage.success("操作成功");
    } else if (formType.value === "update") {
      await updateUser(data);
      // ElMessage.success("操作成功");
    }
    ElMessage.success("操作成功");
    dialogVisible.value = false;
    // 发送操作成功的事件
    emit("success");
  } finally {
    formLoading.value = false;
  }
};
const submitFormDB = createDBFn(submitForm);

/** 重置表单 */
const resetForm = () => {
  formData.value = initFormData();
  formRef.value?.resetFields();
};

const requestFormOptions: any = ref([]);

const createRequestFormOptions = () => {
  //   [
  //     {
  //         "id": "1",
  //         "parentId": "0",
  //         "name": "有来技术",
  //         "code": "YOULAI",
  //         "sort": 1,
  //         "status": 1,
  //         "children": [],
  //         "createTime": null,
  //         "updateTime": "2024-06-24 23:48"
  //     }
  // ]

  /*
    和后端讨论下存id-123-还是存字符串

    colConfig:{span:8}
    查勘现场情况
    1-报案时间-field1
    2-报案单-field2
    3-车牌号-field3
    4-事故时间-field4
    5-被统筹人-field5
    6-被统筹人-field6-必填
    7-联系电话-field7-必填
    8-驾驶员-field8-必填
    9-实际驾驶员-field9-必填
    10-驾驶员性别-下拉-field10-必填

    11-是否指定驾驶员	--field11
    12-驾驶证号-field12-必填
    13-事故原因-下拉-field13-必填
    14-事故责任-下拉-field14-必填
    15-案件流程类型-下拉-field15-必填
    16-预付金额(元)--field16
    17-事故区域-下拉-field17-必填
    18-事故处理部门-下拉-field18-必填
    19-其他事故处理部门-手输--field19
    20-有无人员伤亡-下拉-field20

    21-道路类型-下拉-field21-必填
    22-事故类型-下拉-field22-必填
    23-重大案件-下拉(是-否)-field23
    24-案件状态-下拉-field24-必填
    25-事故地点-手输-field25-必填
    26-事故经过-手输-field26-必填
    27-三者伤(人)--field27
    28-三者亡(人)--field28
    29-本车伤(人)--field29
    30-本车亡(人)--field30

    31-三者车数(辆)--field31
    32-是否需要施救-下拉-field32
    33-是否有责死亡事故	-下拉-field33
    34-是否道路交通事故	-下拉-field34
    35-是否小额快赔案件		-下拉-field35
    36-是否第一现场		-下拉-field36
    37-是否有交管事故书		-下拉-field37
    38-交管事故书编号-手输-field38
    39-是否互碰自赔案件	-下拉-field39
    40-是否代位求偿	-下拉-field40

    41-是否被代位求偿		-下拉-field41
    42-维修厂-下拉-field42
    43-预估案件-下拉(是-否)-field43
    44-本车预估金额（含施救费元）-手输-field44
    45-三者车预估金额（含施救费元）-手输-field45
    46-财物预估金额（含施救费元）-手输-field46
    47-人伤预估金额（元）-手输-field47
    48-公估费（元）-手输-field48
    49-预估金额【总计元】-手输-field49
    50-查勘员-手输-field50
    51-查勘机构-下拉-field51
    52-查勘时间-field52-必填
    53-查勘地点-下拉-field53
    54-查勘结果-手输-field54-必填
    55-备注-手输-field55-

  */
  // 查勘现场情况
  const inspectionSiteList = [];

  /**
   * 2-车辆统筹情况
   * 纯展示-el-text
   * 56-统筹单号-field56
   * 57-打印单号-field57
   * 58-承统单位-field58
   * 59-统筹起始时间-field59
   * 60-统筹截止时间-field60
   * 61-业务员姓名-field61
   * 62-统筹创建人-field62
   * 63-统筹创建时间-field63
   * 64-特别约定-field64
   *
   * 參统人信息和被统筹人信息可以复用-都是表格 colConfig:{span:24}-纯展示
   * 插槽-參统人-coordinateMan
   * 65-參统人姓名-field65
   * 66-证件类型-field66
   * 67-证件号码-field67
   * 68-手机-field68
   * 69-居住地-field69
   * 插槽-被參统人-byCoordinateMan
   *
   * 被统筹车辆信息-纯展示-暂不用插槽
   * 70-车牌号-field70
   * 71-车架号-field71
   * 72-厂牌型号-field72
   * 73-发动机号-field73
   * 74-车辆性质-field74
   * 75-车辆种类-field75
   * 76-车辆种类-field76
   * 77-核定载质量-field77
   * 78-核定人数-field78
   * 79-车辆价格-field79
   * 80-登记日期-field80
   * 81-车主姓名-field81
   *
   * 统筹种类信息-纯展示-列表-插槽-coordinateType-固定四个
   * 82-统筹项目-field82-机动车损失-机动车第三者责任-机动车车上人员责任-司机-机动车车上人员责任-乘客
   * 83-统筹额度(元)-field83-98100.00-100万-1万-1万
   */
  // 车辆统筹情况
  const carCoordinationList = [];

  /**
   * 影像资料
   * 84-影像资料类型-(替换tabs)-下拉-field84
   * 85-现场查勘影像文件-列表图片展示-field85
   */

  // 影像资料
  const videoList = [];

  /**
   * 本车定损
   * 86-车牌号-必填-field86
   * 87-车辆品牌-手输-必填-field87
   * 88-车辆型号-手输-必填-field88
   * 89-车辆款式-手输-必填-field89
   * 90-车架号-手输-必填-field90
   * 91-发动机号-手输-必填-field91
   * 92-排量-手输-field92
   * 93-定损区域*-省市区下拉-field93-94-95
   * 96-驾驶员-手输-必填-field96
   * 97-驾驶员性别-下拉-必填-field97
   * 98-联系电话-手输-必填-field98
   * 99-联系电话-维修厂-必填-field99
   */

  // 本车定损

  const thisCarlossAssessmentList = [];

  /**
   * 配件部分（备注：填写【配件名称】则自动新增保存）
   * 配件列表 parts-插槽
   * 列表可操作
   * 序号可以不展示-无用
   * 100-统筹种类-下拉--field100
   * 101-配件名称-手输--field101
   * 102-价格方案-下拉--field102
   * 103-价格-手输-保留一位--field103
   * 104-数量-手输--field104
   * 105-金额-手输-保留一位--field105
   * 106-核价金额-手输-保留一位--field106-禁用
   * 107-操作员	-手输-field107
   * 108-备注	-手输-field108
   * 合计暂时不做
   *
   * 表单-109-配件合计-手输-field109-禁用
   * 表单-110-残值-手输-field110-禁用
   * 表单-111-（ 配件合计 - 残值 ）-手输-field111-禁用
   */

  // 配件列表

  const partsList = [];

  /**
   * 工时部分（备注：填写【工时名称】则自动新增保存）
   * 配件列表 workTime-插槽
   * 列表可操作- 列表可以复用上面的配件列表就113名称改为工时名称即可
   * 序号可以不展示-无用
   * 112-统筹种类-下拉--field112
   * 113-工时名称-手输--field113
   * 114-统筹种类-下拉--field114
   * 115-价格方案-下拉--field115
   * 116-价格-手输-保留一位--field116
   * 117-数量-手输--field117
   * 118-金额-手输-保留一位--field118
   * 119-核价金额-手输-保留一位--field119-禁用
   * 120-操作员	-手输-field120
   * 121-备注	-手输-field121
   * 合计暂时不做
   *
   * 表单-122-施救费-手输-field122
   * 表单-123-总计-手输-field123-禁用
   * 表单-124-核价总计-手输-field124-禁用
   * 表单-125-定损说明	-手输-field125-禁用
   */

  // 工时列表

  const workTimeList = [];

  /**
   * 索赔须知
   * 索赔须知列表 claimsNotice-插槽
   * 列表仅展示
   * 序号可以不展示-无用
   * 126-选中-isSelection
   * 127-编码-field127
   * 128-材料名称--field128
   * 129-获取渠道及标准-field129

   */

  // 索赔须知列表

  const claimsNoticeList = [];

  /**
   * 理算中心
   * 130-案件流程类型--field130
   * 131-代位求偿--field131
   * 132-被代位求偿--field132
   * 133-报案单号--field133
   * 134-统筹单号--field134
   * 135-新车购置价--field135
   * 136-立案金额	--field136
   * 137-预付金额	--field137
   * 138-总赔付金额--field138
   * 139-本次实付金额	--field139
   * 140-本次赔付金额		--field140

   * 141-案件状态--field141
   * 142-说明--field142
   * 143-统筹赔款--field143
   * 144-公估费	--field144
   * 145-诉讼费	--field145
   * 146-律师费	--field146
   * 147-鉴定费	--field147
   * 148-理赔费用	--field148
   * 149-总计		--field149
   * 150-说明此版块为支出赔款外费用:	--field150
   * 
   * 理算中心-列表-插槽computeCenter
   * 理算中心-列表展示 
   * 都是保留一位小数
   * 151-出险主体	--field151
   * 152-费用类型	--field152
   * 153-统筹额限额--field153
   * 154-本次定损金额	--field154
   * 155-本次核损金额	--field155
   * 156-交强险赔付	--field156
   * 157-责任系数	--field157
   * 158-责任免赔率	--field158
   * 159-绝对免赔率	--field159
   * 160-绝对金额率	--field160
   * 161-是否不计免赔	--field161
   * 162-已赔付金额	--field162
   * 163-应付金额	--field163
   * 164-自单金额	--field164
   * 165-代位金额		--field165
   * 166-备注	--field166
   * 下面是表单
   * 167-理算意见	--field167
   * 168-是否约定赔款支付--field168
   * 169-理算时间	--field169
   * 170-理算机构	--field170
   * 171-理算说明	--field171
   */

  // 理算中心列表

  const computeCenterList = [];

  /**
   *事故补偿书  
   * 172-被统筹人-field172
   * 173-统筹单号-field173
   * 174-车牌号-field174
   * 175-统筹额度-field175
   * 176-厂牌型号-field176
   * 177-统筹期限-field177
   * 178-出险地点-field178
   * 179-出险时间-field179
   * 180-出险司机-field180
   * 181-应付责任-field181
   * 182-事故处理部门-field182
   * 183-补偿性质-field183
   * 184-（代）查勘费-field184
   * 185-补偿金额合计-field185
   * 186-户名-field186
  
   * 事故补偿-列表仅展示
   * 187-开户行-field187
   * 188-户名-field188
   * 189-账号-field189
   * 190-补偿金额-field190
   * 191-联系电话-field191
   * 192-备注-field192
   * 193-操作-field193
   * 
   * 表单
   * 194-账号-field194
   * 195-开户行-field195
   * 196-金额-field196
   * 197-事故原因摘要-field197
   * 198-补偿计算-field198
   * 199-上次备注-field199
   * 200-本次备注-必填-field200
   */

  // 事故补偿书
  const accidentCompensateDocList = [];

  /**
   * 按钮-提交总经理审核-退回理算-案件备注-返回
   */

  const list = [
    ...inspectionSiteList,
    ...carCoordinationList,
    ...videoList,
    ...thisCarlossAssessmentList,
    ...partsList,
    ...workTimeList,
    ...claimsNoticeList,
    ...computeCenterList,
    ...accidentCompensateDocList,
  ];

  addProperty(list);
  return list;
};
requestFormOptions.value = createRequestFormOptions();

const getFormData = () => {
  return formData.value;
};
</script>
